.box {
	width: 100px;
	height: 100px;
	background-color: #000;
}
.demo-1 {
	&:hover{
		//width: 500px;
		transform: rotate(45deg);
	}
	transition: transform 1s ease-in-out;
}
.demo-2{
	margin-top: 10px;
	&:hover{
		.cell{
			animation: move 2s linear 2 alternate forwards;  // infinite 循环播放
		} 
	}
	.cell{
		width: 200px;
		height: 200px;
		background-color: red;
	}
}
@keyframes move{
	100%{
		transform: translateX(200px);
	}
}
.demo-3{
	margin: 40px auto;
	border-radius: 50%;
	animation: jump 1s cubic-bezier(0.41, -0.04, 0.93, 0.29) infinite;
}
@keyframes jump{
	0%{
		transform: translateY(0px);
	}
	90%{
		transform: translateY(200px);
		clip-path: ellipse(50% 50% at 50% 50%);
	}
	100%{
		transform: translateY(0px);
		clip-path: ellipse(50% 48% at 50% 45%);
	}
}